<script setup lang="ts">
import { ListenerProp } from '@varlet/ui';
import { reactive, onMounted ,ref } from 'vue';


// 定义 props
const props = defineProps<{
    modelValue?: string;
    onChange?: ListenerProp<(value: string) => void>
}>();
const countryCodeList = ref([
    {src:'IN.png' ,code:'91'},
    {src:'AUD.png' ,code:'86'},
    {src:'HKD.png' ,code:'886'},
    {src:'USD.png' ,code:'1'},
    ]);
// 定义外部事件
const emit = defineEmits(['update:modelValue', 'change']);

const state = reactive({
    code: '',
    src: '',
});

// 更新状态
const setState = (value: { code: string; src: string; }) => {
    state.code = value.code;
    state.src = value.src;
}

// 切换国家
const onCountryChange = (value: any) => {
    setState(value);
    emit('update:modelValue', value.code);
    emit('change', value.code);
};
// 初始化
onMounted(() => {
    const _country = countryCodeList.value.find(item => item.code === props.modelValue);
    if (_country) {
        setState(_country);
    }
});

</script>
<template>
    <CountryPupop @change="onCountryChange">
        <div class="hl-areacode-picker">
            <div class="picker-label">
                <div class="item-flag">
                    <img :src="$img('country/'+state.src +'')"/>
                 </div>
                <span class="picker-label-text">+{{ state.code }}</span>
                <VarIcon name="menu-down"></VarIcon>
            </div>
        </div>
    </CountryPupop>
</template>

<style lang="scss" scoped>
.hl-areacode-picker {
    padding-right: 20px;
    .item-flag {
          width: 50px;
          height: 50px;
          img {
              width: 100%;
              height: 100%;
          }
       }
    .picker-label {
        height: 40px;
        font-size: 28px;
        color: $text-sub;
        border-right: 1px solid $border;
        @include align-center;

        .picker-label-text {
            margin: 0 6px;
        }
    }
}
</style>